// import React from "./my-react/react";
// import ReactDOM from "./my-react/react-dom.js";

// import React from "react";
// import ReactDOM from "react-dom";

//#region jsx
// const element = (
//   <div className="title" style={{ color: "red" }}>
//     <p style={{ color: "green" }}>hello</p> jsx
//   </div>
// );

// console.log(element);
// console.log(JSON.stringify(element, null, 2));

// ReactDOM.render(element, document.getElementById("root"));
//#endregion

//#region 函数组件
// function FunctionComponent(props) {
//   return (
//     <div className="title" style={{ color: "blue" }}>
//       <p>{props.name}</p>
//       {props.children}
//     </div>
//   );
// }

// const element = (
//   <FunctionComponent name="hello"> 我是函数组件</FunctionComponent>
// );

// ReactDOM.render(element, document.getElementById("root"));
//#endregion

//#region 类组件
// class ClassComponent extends React.Component {
//   render() {
//     return (
//       <div className="title" style={{ color: "green" }}>
//         <p>{this.props.name}</p>
//         {this.props.children}
//       </div>
//     );
//   }
// }

// const element = <ClassComponent name="hello">我是类组件</ClassComponent>;

// ReactDOM.render(element, document.getElementById("root"));
//#endregion

//#region 类组件的更新
// class Counter extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = { number: 0 };
//   }

//   handleClick = () => {
//     this.setState({ number: this.state.number + 1 });
//     console.log(this.state);
//   };

//   render() {
//     return (
//       <div>
//         <p>{this.props.title}</p>
//         <p>number： {this.state.number}</p>
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
// }

// ReactDOM.render(
//   <Counter title="类组件状态更新" />,
//   document.getElementById("root")
// );
//#endregion

// //#region 合成事件和批量更新
// class Counter extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = { number: 0 };
//   }

//   handleClick = (ev) => {
//     console.log(ev.currentTarget);
//     ev.stopPropagation();

//     this.setState({ number: this.state.number + 1 });
//     console.log(this.state);
//     this.setState({ number: this.state.number + 1 });
//     console.log(this.state);

//     setTimeout(() => {
//       this.setState({ number: this.state.number + 1 });
//       console.log(this.state);
//       this.setState({ number: this.state.number + 1 });
//       console.log(this.state);
//     });
//   };

//   handleOutClick = () => {
//     console.log("handleOutClick");
//   };

//   render() {
//     return (
//       <div onClick={this.handleOutClick}>
//         <p>{this.props.title}</p>
//         <p>number： {this.state.number}</p>
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
// }

// ReactDOM.render(
//   <Counter title="合成事件和批量更新" />,
//   document.getElementById("root")
// );
//#endregion

//#region ref 获取元素 DOM
// class Sum extends React.Component {
//   aDom;
//   bDom;
//   result;
//   constructor(props) {
//     super(props);
//     this.aDom = React.createRef();
//     this.bDom = React.createRef();
//     this.result = React.createRef();
//   }
//   handleAdd = () => {
//     let a = this.aDom.current.value * 1;
//     let b = this.bDom.current.value * 1;
//     this.result.current.value = a + b;
//   };
//   render() {
//     return (
//       <>
//         <p>ref 获取元素 DOM</p>
//         <input ref={this.aDom} />+<input ref={this.bDom} />
//         <button onClick={this.handleAdd}>=</button>
//         <input ref={this.result} />
//       </>
//     );
//   }
// }

// ReactDOM.render(<Sum />, document.getElementById("root"));
//#endregion

//#region 在 class 组件上使用 ref
// class Form extends React.Component {
//   input;
//   constructor(props) {
//     super(props);
//     this.input = React.createRef();
//   }

//   getFocus = () => {
//     this.input.current.getFocus();
//   };

//   render() {
//     return (
//       <>
//         <p>在 class 组件上使用 ref</p>
//         <TextInput ref={this.input} />
//         <button onClick={this.getFocus}>获得焦点</button>
//       </>
//     );
//   }
// }

// class TextInput extends React.Component {
//   input;
//   constructor(props) {
//     super(props);
//     this.input = React.createRef();
//   }

//   getFocus = () => {
//     this.input.current.focus();
//   };

//   render() {
//     return <input ref={this.input} />;
//   }
// }

// ReactDOM.render(<Form />, document.getElementById("root"));
//#endregion

//#region ref 转发 (函数组件)
// const TextInput = React.forwardRef((props, ref) => <input ref={ref} />);

// class Form extends React.Component {
//   input;
//   constructor(props) {
//     super(props);
//     this.input = React.createRef();
//   }

//   getFocus = () => {
//     console.log(this.input.current);

//     this.input.current.focus();
//   };

//   render() {
//     return (
//       <>
//         <p>在函数组件上使用 ref (ref 转发)</p>
//         <TextInput ref={this.input} />
//         <button onClick={this.getFocus}>获得焦点</button>
//       </>
//     );
//   }
// }

// ReactDOM.render(<Form />, document.getElementById("root"));
//#endregion

//#region 基本的生命周期
// class Counter extends React.Component {
//   // 会比较两个状态相等就不会刷新视图, PureComponent 是浅比较
//   static defaultProps = {
//     name: "tom",
//   };

//   handleClick = () => {
//     this.setState({ number: this.state.number + 1 });
//   };

//   constructor(props) {
//     super(props);
//     this.state = { number: 0 };
//     console.log("Counter 1.constructor");
//   }
//   componentWillMount() {
//     // 取本地的数据同步的方式：采用渲染之前获取数据，只渲染一次
//     console.log("Counter 2.componentWillMount");
//   }
//   render() {
//     console.log("Counter 3.render");
//     return (
//       <div>
//         <p>{this.state.number}</p>
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
//   componentDidMount() {
//     console.log("Counter 4.componentDidMount");
//   }
//   // react可以shouldComponentUpdate方法中优化 PureComponent 可以帮我们做这件事
//   shouldComponentUpdate(nextProps, nextState) {
//     // 代表的是下一次的属性和下一次的状态
//     console.log("Counter 5.shouldComponentUpdate");
//     return true;
//     // return nextState.number % 2 === 0;
//     // return nextState.number !== this.state.number; // 如果此函数种返回了false 就不会调用render方法了
//   } // 不要随便用 setState 可能会死循环
//   componentWillUpdate() {
//     console.log("Counter 6.componentWillUpdate");
//   }
//   componentDidUpdate() {
//     console.log("Counter 7.componentDidUpdate");
//   }
// }

// ReactDOM.render(<Counter />, document.getElementById("root"));

/*
Counter 1.constructor
Counter 2.componentWillMount
Counter 3.render
Counter 4.componentDidMount

2 Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
Counter 7.componentDidUpdate

2 Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
Counter 7.componentDidUpdate
*/
//#endregion

//#region 子组件生命周期
// class Counter extends React.Component {
//   // 会比较两个状态相等就不会刷新视图, PureComponent 是浅比较
//   static defaultProps = {
//     name: "tom",
//   };

//   handleClick = () => {
//     this.setState({ number: this.state.number + 1 });
//   };

//   constructor(props) {
//     super(props);
//     this.state = { number: 0 };
//     console.log("Counter 1.constructor");
//   }
//   componentWillMount() {
//     // 取本地的数据同步的方式：采用渲染之前获取数据，只渲染一次
//     console.log("Counter 2.componentWillMount");
//   }
//   render() {
//     console.log("Counter 3.render");
//     return (
//       <div>
//         <p>{this.state.number}</p>
//         {this.state.number === 4 ? null : (
//           <ChildCounter count={this.state.number} />
//         )}
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
//   componentDidMount() {
//     console.log("Counter 4.componentDidMount");
//   }
//   // react可以shouldComponentUpdate方法中优化 PureComponent 可以帮我们做这件事
//   shouldComponentUpdate(nextProps, nextState) {
//     // 代表的是下一次的属性和下一次的状态
//     console.log("Counter 5.shouldComponentUpdate");
//     return nextState.number % 2 === 0;
//     // return nextState.number !== this.state.number; // 如果此函数种返回了false 就不会调用render方法了
//   } // 不要随便用 setState 可能会死循环
//   componentWillUpdate() {
//     console.log("Counter 6.componentWillUpdate");
//   }
//   componentDidUpdate() {
//     console.log("Counter 7.componentDidUpdate");
//   }
// }

// class ChildCounter extends React.Component {
//   componentWillMount() {
//     console.log("ChildCounter 1.componentWillMount");
//   }
//   render() {
//     console.log("ChildCounter 2.render");
//     return <div>{this.props.count}</div>;
//   }
//   componentDidMount() {
//     console.log("ChildCounter 3.componentDidMount");
//   }
//   componentWillReceiveProps(newProps) {
//     // 第一次不会执行，之后属性更新时才会执行
//     console.log("ChildCounter 4.componentWillReceiveProps");
//   }
//   shouldComponentUpdate(nextProps, nextState) {
//     console.log("ChildCounter 5.shouldComponentUpdate");
//     return nextProps.count % 3 === 0; // 子组件判断接收的属性 是否满足更新条件 为true则更新
//   }
//   componentWillUnmount() {
//     console.log("ChildCounter 6.componentWillUnmount");
//   }
// }

// ReactDOM.render(<Counter />, document.getElementById("root"));

/**
页面刷新
Counter 1.constructor
Counter 2.componentWillMount
Counter 3.render
ChildCounter 1.componentWillMount
ChildCounter 2.render
ChildCounter 3.componentDidMount
Counter 4.componentDidMount

点击第一次后： 1
Counter 5.shouldComponentUpdate

点击第二次后： 2
Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
ChildCounter 4.componentWillReceiveProps
ChildCounter 5.shouldComponentUpdate
Counter 7.componentDidUpdate

点击第三次后： 3
Counter 5.shouldComponentUpdate

点击第四次后：4
Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
ChildCounter 6.componentWillUnmount
Counter 7.componentDidUpdate

点击第五次后：5
Counter 5.shouldComponentUpdate

点击第六次后：6
Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
ChildCounter 1.componentWillMount
ChildCounter 2.render
ChildCounter 3.componentDidMount
Counter 7.componentDidUpdate

点击第七次后：7
Counter 5.shouldComponentUpdate

点击第八次后：8
Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
ChildCounter 4.componentWillReceiveProps
ChildCounter 5.shouldComponentUpdate
Counter 7.componentDidUpdate
*/
//#endregion

//#region DOM-DIFF
// class DomDiffList extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       list: ["A", "B", "C", "D", "E", "F"],
//     };
//   }

//   handleClick = () => {
//     this.setState({
//       list: ["A", "C", "E", "B", "G"],
//     });
//   };

//   render() {
//     return (
//       <div>
//         <p>DOM DIFF</p>
//         <ul>
//           {this.state.list.map((item) => (
//             <li className={item} key={item}>
//               {item}
//             </li>
//           ))}
//         </ul>
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
// }

// ReactDOM.render(<DomDiffList />, document.getElementById("root"));
//#endregion

//#region React.Fragment
// class ReactFragment extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       list: ["A", "B", "C", "D", "E", "F"],
//     };
//   }

//   handleClick = () => {
//     this.setState({
//       list: ["A", "C", "E", "B", "G"],
//     });
//   };

//   render() {
//     return (
//       <React.Fragment>
//         <p>DOM DIFF</p>
//         <ul>
//           {this.state.list.map((item) => (
//             <li className={item} key={item}>
//               {item}
//             </li>
//           ))}
//         </ul>
//         <button onClick={this.handleClick}> + </button>
//       </React.Fragment>
//     );
//   }
// }

// ReactDOM.render(<ReactFragment />, document.getElementById("root"));
//#endregion

//#region 新的生命周期 getDerivedStateFromProps
// class Counter extends React.Component {
//   state = {
//     number: 0,
//   };

//   handleClick = () => {
//     this.setState({
//       number: this.state.number + 1,
//     });
//   };

//   render() {
//     return (
//       <div>
//         <p>新的生命周期</p>
//         <ChildCounter number={this.state.number} />
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
// }

// class ChildCounter extends React.Component {
//   state = {
//     count: 0,
//   };

//   // getDerivedStateFromProps 替代 componentWillReceviesProps
//   static getDerivedStateFromProps(nextProps, prevState) {
//     const { number } = nextProps;

//     // 当传入的 nextProps 发生变化的时候，更新自己的 state
//     if (number % 2 === 0) {
//       return { count: number * 2 };
//     } else if (number % 3 === 0) {
//       return { count: number * 3 };
//     } else {
//       return null;
//     }
//   }

//   render() {
//     return <div>{this.state.count}</div>;
//   }
// }

// ReactDOM.render(<Counter />, document.getElementById("root"));
//#endregion

//#region 新的生命周期 getSnapshotBeforeUpdate
// class ScrollList extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = { messages: [] };
//     this.wrapper = React.createRef();
//   }

//   addMessage = () => {
//     this.setState({
//       messages: [`${this.state.messages.length}`, ...this.state.messages],
//     });
//   };

//   componentDidMount() {
//     console.log("componentDidMount");
//     this.timer = setInterval(() => {
//       this.addMessage();
//     }, 1000);
//   }

//   componentWillUnmount() {
//     console.log("componentWillUnmount");
//     window.clearInterval(this.timer);
//   }

//   getSnapshotBeforeUpdate() {
//     return {
//       prevScrollTop: this.wrapper.current.scrollTop, // DOM 更新前向上卷去的高度
//       prevScrollHeight: this.wrapper.current.scrollHeight, // DOM 更新前内容的高度
//     };
//   }

//   componentDidUpdate(
//     prevProps,
//     prevStete,
//     { prevScrollTop, prevScrollHeight }
//   ) {
//     console.log("componentDidUpdate");
//     this.wrapper.current.scrollTop =
//       prevScrollTop + (this.wrapper.current.scrollHeight - prevScrollHeight);
//   }

//   render() {
//     const style = {
//       height: "100px",
//       width: "200px",
//       border: "1px solid red",
//       overflow: "auto",
//     };
//     return (
//       <>
//         <p>新的生命周期 getSnapshotBeforeUpdate</p>
//         <div style={style} ref={this.wrapper}>
//           {this.state.messages.map((message, index) => {
//             return <div key={index}>{message}</div>;
//           })}
//         </div>
//       </>
//     );
//   }
// }

// ReactDOM.render(<ScrollList />, document.getElementById("root"));
//#endregion

//#region Context（上下文）
// const ThemeContext = React.createContext();
// const { Provider, Consumer } = ThemeContext;
// console.log(ThemeContext);

// const style = { margin: "5px", padding: "5px" };

// function Title(props) {
//   console.log("Title");
//   return (
//     <Consumer>
//       {(contextValue) => (
//         <div style={{ ...style, border: `5px solid ${contextValue.color}` }}>
//           Title
//         </div>
//       )}
//     </Consumer>
//   );
// }

// class Header extends React.Component {
//   static contextType = ThemeContext;

//   render() {
//     console.log("Header");
//     return (
//       <div style={{ ...style, border: `5px solid ${this.context.color}` }}>
//         Header
//         <Title />
//       </div>
//     );
//   }
// }

// function Content() {
//   console.log("Content");
//   return (
//     <Consumer>
//       {(contextValue) => (
//         <div style={{ ...style, border: `5px solid ${contextValue.color}` }}>
//           Content
//           <button
//             style={{ color: "red" }}
//             onClick={() => contextValue.changeColor("red")}
//           >
//             红
//           </button>
//           <button
//             style={{ color: "green" }}
//             onClick={() => contextValue.changeColor("green")}
//           >
//             绿
//           </button>
//         </div>
//       )}
//     </Consumer>
//   );
// }

// class Main extends React.Component {
//   static contextType = ThemeContext;

//   render() {
//     console.log("Main");
//     return (
//       <div style={{ ...style, border: `5px solid ${this.context.color}` }}>
//         Main
//         <Content />
//       </div>
//     );
//   }
// }

// class Page extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = { color: "blue" };
//   }

//   changeColor = (color) => {
//     this.setState({ color });
//   };

//   render() {
//     console.log("Page");
//     const contextValue = {
//       color: this.state.color,
//       changeColor: this.changeColor,
//     };
//     return (
//       <Provider value={contextValue}>
//         <div
//           style={{
//             ...style,
//             width: "250px",
//             border: `5px solid ${this.state.color}`,
//           }}
//         >
//           Page
//           <Header />
//           <Main />
//         </div>
//       </Provider>
//     );
//   }
// }

// ReactDOM.render(<Page />, document.getElementById("root"));
//#endregion

//#region 类优化 React.PureComponent
// class ClassCounterComponent extends React.PureComponent {
//   render() {
//     console.log("ClassCounter render");
//     return <div>ClassCounter: {this.props.count}</div>;
//   }
// }

// class App extends React.Component {
//   state = { number: 0 };
//   amountRef = React.createRef();

//   handleClick = () => {
//     const nextNumber =
//       this.state.number + parseInt(this.amountRef.current.value);
//     this.setState({ number: nextNumber });
//   };

//   render() {
//     return (
//       <div>
//         <p>性能优化：React.PureComponent</p>

//         <ClassCounterComponent count={this.state.number} />

//         <input ref={this.amountRef} />
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
// }

// ReactDOM.render(<App />, document.getElementById("root"));
//#endregion

//#region 函数优化 React.memo
// function FunctionCounterComponent(props) {
//   console.log("FunctionCounter render");
//   return <div>FunctionCounter:{props.count}</div>;
// }

// const MemoFunctionCounterComponent = React.memo(FunctionCounterComponent);

// class App extends React.Component {
//   state = { number: 0 };
//   amountRef = React.createRef();

//   handleClick = () => {
//     const nextNumber =
//       this.state.number + parseInt(this.amountRef.current.value);
//     this.setState({ number: nextNumber });
//   };

//   render() {
//     return (
//       <div>
//         <p>性能优化：React.memo</p>

//         <MemoFunctionCounterComponent count={this.state.number} />

//         <input ref={this.amountRef} />
//         <button onClick={this.handleClick}> + </button>
//       </div>
//     );
//   }
// }

// ReactDOM.render(<App />, document.getElementById("root"));
//#endregion

//#region React.createPortal
// function createEl() {
//   const el = document.createElement("div");
//   el.classList.add("dialog_container");
//   document.body.appendChild(el);
//   return el;
// }

// class Dialog extends React.Component {
//   constructor(props) {
//     super(props);
//     this.node = createEl();
//   }

//   render() {
//     // 把 Dialog 组件挂载到 createEl() 中创建的 dialog_container 元素中
//     return ReactDOM.createPortal(
//       <div
//         className="dialog"
//         style={{ width: "100px", height: "100px", border: "1px solid red" }}
//       >
//         {this.props.children}
//       </div>,
//       this.node
//     );
//   }

//   componentWillUnmount() {
//     window.document.body.removeChild(this.node);
//   }
// }

// class App extends React.Component {
//   render() {
//     return (
//       <div className="createPortal">
//         <Dialog>模态窗</Dialog>
//       </div>
//     );
//   }
// }

// ReactDOM.render(<App />, document.getElementById("root"));
//#endregion

import React from "./my-react/react";
import ReactDOM from "./my-react/react-dom.js";

// import React from "react";
// import ReactDOM from "react-dom";

//#region React Hooks 之 React.useState
// function App() {
//   const [count, setCount] = React.useState(0);
//   const [age, setAge] = React.useState(0);

//   const handleClick = () => {
//     setCount(count + 1);
//     setCount(count + 1);
//     setCount(count + 1);
//     setAge(age + 1);
//   };

//   return (
//     <div>
//       <p>React.useState</p>
//       <p>{count}</p>
//       <p>{age}</p>
//       <button onClick={handleClick}> + </button>
//     </div>
//   );
// }

// ReactDOM.render(<App />, document.getElementById("root"));
//#endregion

//#region React Hooks 之 React.useCallback 和 React.useMemo
// const Child = ({ data, handleClick }) => {
//   console.log("Child render");
//   return <button onClick={handleClick}>{data.count}</button>;
// };

// const MemoChild = React.memo(Child);

// function App() {
//   console.log("App render");
//   const [name, setName] = React.useState("修改父组件的导致子组件更新");
//   const [count, setCount] = React.useState(0);

//   const data = React.useMemo(() => ({ count }), [count]);

//   const handleClick = React.useCallback(() => setCount(count + 1), [count]);

//   return (
//     <div>
//       <p>React.useCallback 和 React.useMemo</p>
//       <input
//         type="text"
//         value={name}
//         onChange={(event) => setName(event.target.value)}
//       />
//       <MemoChild data={data} handleClick={handleClick} />
//     </div>
//   );
// }

// ReactDOM.render(<App />, document.getElementById("root"));
//#endregion

//#region React Hooks 之 React.useReducer
// function reducer(state = { count: 0 }, action) {
//   switch (action.type) {
//     case "ADD":
//       return { count: state.count + 1 };
//     case "MINUS":
//       return { count: state.count - 1 };
//     default:
//       return state;
//   }
// }

// function Counter() {
//   const [state, dispatch] = React.useReducer(reducer, { count: 0 });
//   const [number, setNumber] = React.useState(0);
//   const handleClick = () => {
//     setNumber(number + 1);

//     const timer = setTimeout(() => {
//       // 传递函数
//       setNumber(() => number + 1);
//       clearTimeout(timer);
//     }, 800);
//   };

//   return (
//     <div>
//       <p>React.useReducer</p>
//       <p>Count: {state.count}</p>
//       <button onClick={() => dispatch({ type: "ADD" })}> 加 </button>
//       <button onClick={() => dispatch({ type: "MINUS" })}> 减 </button>

//       <p>number: {number}</p>
//       <button onClick={handleClick}>useState 调用 useReducer</button>
//     </div>
//   );
// }

// ReactDOM.render(<Counter />, document.getElementById("root"));
//#endregion

//#region React Hooks 之 React.useContext
// const CounterContext = React.createContext();

// function reducer(state, action) {
//   switch (action.type) {
//     case "ADD":
//       return { number: state.number + 1 };
//     case "MINUS":
//       return { number: state.number - 1 };
//     default:
//       return state;
//   }
// }

// function Counter() {
//   const { state, dispatch } = React.useContext(CounterContext);

//   return (
//     <div>
//       <p>React.useContext</p>
//       <p>{state.number}</p>
//       <button onClick={() => dispatch({ type: "ADD" })}> + </button>
//       <button onClick={() => dispatch({ type: "MINUS" })}> - </button>
//     </div>
//   );
// }

// function App() {
//   const [state, dispatch] = React.useReducer(reducer, { number: 0 });

//   return (
//     <CounterContext.Provider value={{ state, dispatch }}>
//       <Counter />
//     </CounterContext.Provider>
//   );
// }

// ReactDOM.render(<App />, document.getElementById("root"));
//#endregion

//#region React Hooks 之 React.useEffect
// function Counter() {
//   const [count, setCount] = React.useState(0);

//   React.useEffect(() => {
//     console.log("开启新的定时器");

//     const timer = setInterval(() => {
//       setCount((count) => count + 1);
//     }, 1000);

//     return () => {
//       console.log("销毁定时器");
//       clearInterval(timer);
//     };
//   });

//   return (
//     <div>
//       <p>React.useEffect</p>
//       <p>{count}</p>
//     </div>
//   );
// }

// ReactDOM.render(<Counter />, document.getElementById("root"));
//#endregion

//#region  React Hooks 之 React.useRef 和 React.useLayoutEffect
// const App = () => {
//   const ref = React.useRef();

//   //  这里可以使用替换为 React.useEffect 看效果
//   React.useLayoutEffect(() => {
//     ref.current.style.transform = `translate(500px)`;
//     ref.current.style.transition = `all 500ms`;
//   });

//   const style = {
//     width: "100px",
//     height: "100px",
//     borderRadius: "50%",
//     backgroundColor: "red",
//   };

//   return (
//     <>
//       <p> React.useRef 和 React.useLayoutEffect</p>
//       <div style={style} ref={ref}></div>
//     </>
//   );
// };

// ReactDOM.render(<App />, document.getElementById("root"));
//#endregion

//#region 通过 React.useRef 接收 useState 设置的值
// function Counter() {
//   const [value, setValue] = React.useState(0);
//   const vRef = React.useRef();

//   const handleClick = () => {
//     const newValue = value + 1;
//     vRef.current = newValue;
//     setValue(newValue);
//     getValue();
//   };

//   const getValue = () => {
//     // 在 handleClick 调用该函数，直接通过原来的变量 value，拿到的值是上一次的数据，滞后的
//     // 因此使用 useRef 来接收
//     console.log("不正确的 value: ", value);
//     console.log("正确的 value: ", vRef.current);
//   };

//   return (
//     <div>
//       <p>{value}</p>
//       <button onClick={handleClick}> + </button>
//     </div>
//   );
// }

// ReactDOM.render(<Counter />, document.getElementById("root"));
//#endregion

//#region React Hooks 之 React.forwardRef 和 React.useImperativeHandle
function Child(props, ref) {
  const inputRef = React.useRef();

  React.useImperativeHandle(ref, () => ({
    // 自定义通过 ref 获取，暴露该组件出去的方法
    focus() {
      inputRef.current.focus();
    },
    remove() {
      alert(3);
    },
  }));

  return <input type="text" ref={inputRef} />;
}

const ForwardChild = React.forwardRef(Child);

function Parent() {
  const inputRef = React.useRef();

  const getFocus = () => {
    console.log(inputRef.current);
    inputRef.current.value = "focus";
    // 通过 ref 调用组件暴露出来的 focus 方法
    inputRef.current.focus();
    inputRef.current.remove();
  };

  return (
    <div>
      <p>React.forwardRef 和 React.useImperativeHandle</p>
      <ForwardChild ref={inputRef} />
      <button onClick={getFocus}>获得焦点</button>
    </div>
  );
}

ReactDOM.render(<Parent />, document.getElementById("root"));
//#endregion
